<template>
	<view class="friend">
		<view class="Girl" v-for="(item,index) in res" :key='index' @tap="jump(item.id)" v-if="item.is_top">
			<image :src="item.thumb" mode=""></image>
			<view style="font-size: 28upx;color: #333333; padding:0upx 15upx;display: inline-flex;">
				<view class="userName">{{item.nickname}}</view>
				<text style=" padding-right: 10upx;">{{item.age}}岁</text>
				<text>{{item.sex_name}}</text>
			</view>
			<p class="title">{{item.hobby}}</p>  
		</view>
		<image :src="Gimgs" mode="" class="Gimgs"></image>
		<view class="Girl" v-for="(item,index) in res" :key='index' @tap="jump(item.id)" v-if="!item.is_top">
			<image :src="item.thumb" mode=""></image>
			<view style="font-size: 28upx;color: #333333; padding:0upx 15upx;display: inline-flex;">
				<view class="userName">{{item.nickname}}</view>
				<text style=" padding-right: 10upx;">{{item.age}}岁</text>
				<text>{{item.sex_name}}</text>
			</view>
			<p class="title">{{item.hobby}}</p>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["res"],
		data() {
			return {
				Gimgs: require('../../static/img/news/yuemeizi.png'),
			}
		},
		methods: {
			jump(id) {
				uni.navigateTo({
					url: 'friendDetails?id='+id   
				});
			}
		}
	};
</script>

<style lang="scss">
	.friend {
		margin: 30upx 30upx;
		height: auto;

		.Girl {
			background-color: #ffffff;
			width: 223upx;
			height: 315upx;
			margin: 0upx 4upx 10upx 4upx;
			border-radius: 4px;
			display: inline-block;

			image {
				width: 223upx;
				height: 200upx;
				border-radius: 4px;

			}

			.title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 0upx 15upx;
				font-size: 26upx;
				color: #c3c3c3;
			}

			view {
				.userName {
					padding-right: 10upx;
					overflow: hidden;
					width: 85upx;
					height: 45upx;
				}
			}
		}

		.Gimgs {
			margin: 10px 0upx;
			height: 241upx;
			width: 690upx;
		}
	}
</style>
